<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu Side Dish</title>
<link rel="stylesheet" type="text/css" href="css/sp.css"/>
<script type="text/javascript">

	function onRightArrowsClick(){
		var formEdit = document.getElementById("formSpicy");
		var action = document.getElementById("inputActionFromSpicy");
		action.setAttribute("value", "edit");
		var listCheckBox = document.getElementsByTagName("input");
		var ids = "";
		for(var i=0;i < listCheckBox.length; i++){
			if(listCheckBox[i].type == "checkbox" && listCheckBox[i].id.substring(0,1)=="m" && listCheckBox[i].checked == true){
				ids += listCheckBox[i].id.substring(1,listCheckBox[i].id.length) + ",";
			}
		}
		document.getElementById("valueFromSpicy").setAttribute("value", ids);
		if(ids.length > 0)
			formEdit.submit();
		else
			alert("Please Select At least one Spicy Name to add into Menu Spicy.");
	}
	
	function onLeftArrowsClick(){
		var formEdit = document.getElementById("formMenuSpicy");
		var action = document.getElementById("inputActionFormMenuSpicy");
		action.setAttribute("value", "del");
		var listCheckBox = document.getElementsByTagName("input");
		var ids = "";
		for(var i=0;i < listCheckBox.length; i++){
			if(listCheckBox[i].type == "checkbox" && listCheckBox[i].id.substring(0,1)=="s" && listCheckBox[i].checked == true){
				ids += listCheckBox[i].id.substring(1,listCheckBox[i].id.length) + ",";
			}
		}
		document.getElementById("valueFormMenuSpicy").setAttribute("value", ids);
		if(ids.length > 0)
			formEdit.submit();
		else
			alert("Please Select At least one Menu Spicy to remove it from Side Menu Spicy list.");
	}
	
	function onChangeMenu(){
		var menuChangeForm = document.getElementById("menuChangeForm");
		menuChangeForm.submit();
	}
	
</script>
</head>
<body>
	<div style="width:100%;" align="center">
		
		<div class="menu">
			<%@include file="menu.jsp" %>
		</div>
		<div align="center" class="main">
			<%@ include file="header.jsp" %>
			<div align="center"><h2>Menu Spicy</h2></div>	
			<div style="width: 80%; border: 1px solid #000000;">
				<form:form id="menuChangeForm" method="Post" action="menuspicy.do" commandName="menu">
					
					<div align="left" style="background-color:#6D7B8D;"><font color="#FFFFFF">Add Menu Spicy</font></div>
					<input type="hidden" name="action" value="onselect"/>
					<table cellspacing="10">
						
						<tr>
							<td align="right">Menu :</td>
							<td>
								<form:select path="menuID" onchange="onChangeMenu()">
									<form:option value="0" label="Select"/>
									<form:options items="${listMenus}" itemLabel="menuname" itemValue="menuID"/>
								</form:select>
							</td>
							<td><form:errors path="menuID" cssClass="error"/></td>													
						</tr>						
					</table>
				</form:form>
			</div>
			<br>
			
			<table width="100%">
				<tr><th align="center">Spicy List</th><th></th><th align="center">Selected Menu Spicy List</th></tr>
				<tr valign="top">
					<td width="45%">
						<div>
							<form:form id="formSpicy" action="menuspicy.do" method="post">
								<input id="inputActionFromSpicy" name="action" type="hidden"/>
								<input id="valueFromSpicy" name="ids" type="hidden"/>
								<table width="100%" cellpadding="10" border="1px solid #000000">
									<tr class="even">
										<th align="center">S. No.</th>
										<th align="center">Spicy Name</th>
										<th align="center">Description</th>
										<th align="center">Select</th>
									</tr>
									<c:if test="${fn:length(listNotMenuSpicys) > 0}">
										<c:forEach items="${listNotMenuSpicys}" var="listNotMenuSpicys" varStatus="status">
											<tr class="<c:if test="${status.count % 2 == 0}">evenrow</c:if>">
												<td align="center">${status.count}</td>
												<td align="center">${listNotMenuSpicys.spicyname}</td>
												<td align="center">${listNotMenuSpicys.description}</td>
												<td align="center"><input type="checkbox" id="m${listNotMenuSpicys.spicyID}"/></td>
											</tr>
										</c:forEach>
									</c:if>
								</table>										
							</form:form>
						</div>
				
					</td>
					
					<td align="center" width="5%" valign="middle">
						<table>
							<tr><td><c:if test="${fn:length(listNotMenuSpicys) > 0}"><img style="cursor: pointer;" src="images/RightArrows.png" onclick="onRightArrowsClick()"/></c:if></td></tr>
							<tr><td></td></tr>
							<tr><td><c:if test="${fn:length(listMenuspicy) > 0 }"><img style="cursor: pointer;" src="images/LeftArrows.png" onclick="onLeftArrowsClick()"/></c:if></td></tr>
						</table>				
					</td>
					
					<td width="45%">
						<div>
							<form:form id="formMenuSpicy" action="menuspicy.do" method="post">
								<input id="inputActionFormMenuSpicy" name="action" type="hidden"/>
								<input id="valueFormMenuSpicy" name="ids" type="hidden"/>
								<table width="100%" cellpadding="10" border="1px solid #000000">
									<tr class="even">
										<th align="center">S. No.</th>
										<th align="center">Spicy Name</th>
										<th align="center">Description</th>
										<th align="center">Select</th>
									</tr>
									<c:if test="${fn:length(listMenuspicy) > 0}">
										<c:forEach items="${listMenuspicy}" var="listMenuspicy" varStatus="status">
											<tr class="<c:if test="${status.count % 2 == 0}">even</c:if>">
												<td align="center">${status.count}</td>
												<td align="center">${listMenuspicy.spicymaster.spicyname}</td>
												<td align="center">${listMenuspicy.spicymaster.description}</td>
												<td align="center"><input type="checkbox" id="s${listMenuspicy.menuspicyID}"/></td>
											</tr>
										</c:forEach>
									</c:if>
								</table>
							</form:form>
						</div>
					</td>
				</tr>
			</table>
			
			
		</div>
	</div>
</body>
</html>